<!--  -->
<template>
  <div class>
    <router-link
      :to="{path:'/teacherDetail',query:{id:item.id}}"
      v-for="item in teachers"
      :key="item.id"
    >
      <div class="media teacher-info">
        <div class="media-content">
          <div class="media-left">
            <a href="#">
              <img
                class="media-object"
                :src="item.sex==1?'/static/images/w.jpg':'/static/images/m.jpg'"
                alt
              />
            </a>
          </div>
          <div class="media-body">
            <div class>
              <span class="name">{{item.name}}</span>
              <span class="phone">{{item.teacher_number}}</span>
            </div>
            <div class>
              <span class="school">{{item.university}}</span>
              <span class="subject">{{item.subject}}</span>
            </div>
            <div class>
              <span class="card-1">
                <i>身</i>
                {{item.identity}}
              </span>
              <span class="card-2">
                <i>证</i>已认证
              </span>
            </div>
          </div>
        </div>
      </div>
    </router-link>
  </div>
</template>

<script>
import axios from "axios";
import { log } from "util";
export default {
  components: {},
  data() {
    return {
      teachers: []
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {},
  created() {
    console.log(this.$route.params.q);
    if (!this.$route.params.q) {
      axios.get("http://localhost:3000/api/teachers").then(res => {
        this.teachers = res.data;
        console.log(res.data);
      });
      return;
    }
    axios
      .get("http://localhost:3000/api/approve_subject_teachers", {
        params: {
          approve_subject: this.$route.params.q
        }
      })
      .then(res => {
        this.teachers = res.data;
        console.log(res.data);
      });
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {}
};
</script>
<style lang='scss' scoped>
.media:first-child {
  margin-top: 15px;
}
.mint-swipe {
  width: 100%;
  height: 215px;
  .mint-swipe-item {
    width: 100%;
    height: 100%;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
}
.table-view {
  padding-left: 0;
}
.table-view-cell {
  text-align: center;
  img {
    width: 50px;
    height: 50px;
  }
  .media-body {
    padding-top: 10px;
  }
}
.text-word {
  text-align: center;
  padding: 5px 0 10px 0;
  color: #444;
}
p {
  margin: 0;
  padding: 5px;
}
.data-center {
  margin: 0 20px;
  background-color: #eee;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  .teachers {
    text-align: center;
    flex: 1;
    border-right: 1px solid #ccc;
  }
  .students {
    text-align: center;
    flex: 1;
  }
  .number {
    color: #222;
    font-weight: bold;
  }
}
.content-title {
  margin-top: 10px;
  font-size: 14px;
  padding: 10px 20px;
  display: flex;
  .msyx {
    text-align: center;
    flex: 1;
    margin-left: 40px;
  }
  .more {
    a {
      width: 40px;
      text-align: center;
      span {
        margin-top: 2px;
      }
    }
  }
}
.teacher-info {
  margin-top: 10px;
  .media-content {
    display: flex;
    margin: 0 20px 5px 20px;
    padding: 5px 0;
    border-bottom: 1px solid #eee;
    .media-left {
      width: 25%;
    }
    .media-body {
      width: 75%;
      .school,
      .subject,
      .name {
        font-size: 15px;
        color: #222;
        padding-right: 10px;
      }
    }
  }
  .media-object {
    border-radius: 5px;
    width: 64px;
    height: 64px;
  }
  padding: 0 4px;
  i {
    display: inline-block;
    line-height: 16px;
    text-align: center;
    min-width: 16px !important;
    min-height: 16px !important;
    font-style: normal;
    font-size: 12px;
    margin-right: 2px;
    color: #fff;
    border-radius: 2px;
  }
  .card-1,
  .phone {
    padding-right: 20px;
    color: #888;
    i {
      background-color: #ff9900;
    }
  }
  .card-2 {
    color: #888;
    padding-right: 20px;
    i {
      background-color: #e94326;
    }
  }
}
</style>
